<!DOCTYPE html>
<html lang="zh-CN">
	<head>
		<meta charset="utf-8">
		<meta http-equiv="X-UA-Compatible" content="IE=edge, chrome=1">
		<meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no, shrink-to-fit=no">
		<meta name="renderer" content="webkit|ie-comp|ie-stand">
		<meta http-equiv="Cache-Control" content="no-siteapp">
		<meta name="author" content="JFinal">
		<meta name="keywords" content="基于jfinal enjoy模板引擎导出MySQL数据库表结构">
		<meta name="description" content="基于jfinal enjoy模板引擎导出MySQL数据库表结构">
		
		<title>数据库表结构</title>
		<style type="text/css">			
			.database {width:100%;min-height:30px;top:0px;z-index:1000;margin:1px auto;position:fixed;border: 0px;background-color:#FBF8F8;}
			
			a{text-decoration: none;font-size: 13px;color:black; display: inline-block; height: 25px; background-color:#F2F2F2;line-height: 25px; padding: 0 10px; border: 1px solid #e2e2e2; margin: 0 2px; border-radius: 4px; vertical-align: middle; cursor:pointer;}
			a:hover{text-decoration: none; border: 1px solid #1E9FFF;}
			a.current{text-decoration: none;display: inline-block; height: 25px; line-height: 25px; padding: 0 10px; margin: 0 2px; color: #fff; background-color: #1E9FFF; border: 1px solid #1E9FFF; cursor: pointer;}
			
			table.tableShow{color:#666;border:1px solid #cad9ea;table-layout:automatic;empty-cells:show;border-collapse: collapse;margin:0 auto;cursor:default;}
			table.tableShow th {font-weight: bold;color: #4D647C;background: #E5EDF9;height:30px;white-space:nowrap;padding:0 1em 0;word-break:keep-all; border:1px solid #cad9ea;}
			table.tableShow td{height:25px;padding:0 1em 0;border:1px solid #cad9ea;}
			table.tableShow tr:hover{background: #FFFF99;}
			
			.primarykey {color:red;font-weight:bold;}
		</style>
	</head>
	
	<body>
		<div id="database" class="database">
			#for(db : batchDbTables)
			<a href="javascript:void(0);" onclick="showTables(this, '#(db.key)');" /><span>数据库#(db.key)</span></a>
			#end
		</div>
		<div id="tables" style="display:block;">
		#for(db : batchDbTables)
			<div id="#(db.key)" style="width:100%; display:none;">
				<table id="db_#(db.key)" class="tableShow">
					#for(tb : db.value)
						<tr>
							<th colspan="6" class="tableRow">
							#if(tb.remark)
					        	#(tb.remark)：
					    	#end
					    	#(tb.tableName)
					    	#if(tb.primaryKey)
					    	（主键：#(tb.primaryKey)）
					    	#end
					    	</th>
						</tr>
						<tr class="tableTitle">
							<th>序号</td>
							<th>字段名</td>
							<th>类型</td>
							<th>是否允许为空</td>
							<th>默认值</td>
							<th>说明</td>
						</tr>
						#for(col : tb.columns)
						<tr>
							<td>#(for.count)</td>
							<td #if(col.primaryKey)class="primarykey"#end>#(col.columnName) #if(col.primaryKey)(PK)#end</td>
							<td>#(col.columnType)</td>
							<td>#(col.nullable)</td>
							<td>#(col.defaultValue)</td>
							<td>#(col.remark)</td>
						</tr>
						#end
				    #end
				</table>
			</div>
		#end
		</div>
	</body>
	<script type="text/javascript">
	var buttons = document.getElementsByTagName("a");
	var tables = document.getElementsByTagName("table");
	document.getElementById("tables").style.marginTop = (document.getElementById("database").clientHeight + 5) + "px";
	if (buttons.length > 0) {
		buttons[0].click();
	}
	
	function showTables(obj, id) {
		for (var i = 0; i < tables.length; i++) {
			buttons[i].className = "";
			if (tables[i].parentElement.id != id) {
				tables[i].parentElement.style.display = "none";
			} else {
				tables[i].parentElement.style.display = "block";
			}
		}
		obj.className = "current";
	};
	</script>
</html>